<template>
  <div class="tmpl">
       <mt-swipe class='mtitem':auto="2000">
       <mt-swipe-item v-for="item in imagesList " :key="item.img">
       <a :href="item.url">
         <img :src="item.img" alt="">
         </a>
       </mt-swipe-item>
     </mt-swipe>


     <!-- 九宫格 -->

     <div>
       <ul>
         <li>
         <router-link to='/news/list'>
             <div class="one ooo"></div>
             <div>新闻咨询</div>
         </router-link>
         </li>
         <li><router-link to="photo/list">
             <div class="two ooo"></div>
             <div>图片分享</div>
         </router-link>
         </li>
         <li><a href="#">
             <div class="three ooo"></div>
             <div>商品购买</div>
          </a>
        </li>
       </ul>
       <ul>
         <li><a href="#">
             <div class="four ooo"></div>
             <div>留言反馈</div>
         </a>
         </li>
         <li><a href="#">
             <div class="five ooo"></div>
             <div>视频专区</div>
         </a>
         </li>
         <li><a href="#">
             <div class="six ooo"></div>
             <div>联系我们</div>
          </a>
        </li>
       </ul>
     </div>
  </div>
</template>

<style scoped>
  .mtitem{
    width: 100%;
    height: 250px;
  }
  .mtitem img {
    width: 100%;
    height: 250px;
  }

  ul{
    margin: 0;
    padding: 0;
    height: 70px;
    list-style: none;
    display: flex;
  }
  ul>li{
    flex: 1;
    width: 40px;
    text-align: center;
    line-height: 70px;
    height: 120px;
    position: relative;
  }
   ul>li a{
    font-size: 16px;
    color: black;
   }

   ul>li .ooo{
    width: 40px;
    height: 40px;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    background-image: url('../../../statics/images/menu3.png');
    background-repeat:round;
   }
   ul>li div{
    position:absolute;
    left: 50%;
    margin-left: -35px;
    top: 30px;
   }
   ul>li .two{
    background-image: url('../../../statics/images/menu4.png');
    background-repeat:round;
   }
    ul>li .three{
    background-image: url('../../../statics/images/menu5.png');
    background-repeat:round;
   }
    ul>li .four{
    background-image: url('../../../statics/images/menu6.png');
    background-repeat:round;
   }
    ul>li .five{
    background-image: url('../../../statics/images/menu9.png');
    background-repeat:round;
   }
    ul>li .six{
    background-image: url('../../../statics/images/menu10.png');
    background-repeat:round;
   }

</style>
<script>
     
      import common from '../../tools/common.js';
      export default {
          data(){
            return {
              imagesList:[]
            }
          },

          created(){
              
              this.getimagesList();
          },

          methods:{
              getimagesList(){
                const url=common.apihost+'api/getlunbo';

                this.$http.get(url).then(res=>{
                      this.imagesList=res.body.message;
                },err=>{
                     console.log(err);
                })
              }
          }
      }

</script>